<link rel="stylesheet" type="text/css" href="/css/imgareaselect-default.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.imgareaselect.pack.js"></script>
<?php echo __('Directory name:')?> &nbsp;<b><?php echo $dir; ?> &nbsp;<?php echo $w . 'x' . $h; ?></b><br/>

<?php // set ratio for croping ?>
<?php if(!$w || !$h):?>
    <?php $ratio = ''; ?>
<?php else: ?>
<?php $ratio = $w.':'.$h;?>
<?php endif; ?>

<?php echo form_tag('crop/crop', 'id=crop'); ?>
<?php echo input_hidden_tag('state', $state);?>
<?php echo input_hidden_tag('x1', '');?>
<?php echo input_hidden_tag('y1', '');?>
<?php echo input_hidden_tag('width', '');?>
<?php echo input_hidden_tag('height', '');?>
<?php echo submit_tag(__('Save croped image')); ?>
<?php if(($state-1)>0): ?>
    <?php echo button_to(ucfirst(__('back'))
                        , 'crop/crop?state='.($state-1)
                        , array('class' => ''))?>
<?php endif; ?>
<?php echo button_to(ucfirst(__('next'))
                    , 'crop/crop?state='.($state+1)
                    , array('class' => '')); ?>
<?php echo button_to(__('Cancel file upload')
                    , 'crop/cancelCrop'
                    , array('class' => ''));?>
<?php echo button_to(__('Save by default')
                    , 'crop/saveCrop'
                    , array('class' => ''))?>
</form><br/>
<?php echo image_tag('/'.$path.'/' . $name
                        , array( 'id' => 'photo'));?><br/>
<?php if(file_exists('images/gallery/' .$dir. '/' . $name)): ?>
    <b><?php echo __('Croped file:')?> &nbsp;</b><br/>
    <?php echo image_tag('/images/gallery/' .$dir. '/' . $name);?>
<?php endif; ?>
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('img#photo').imgAreaSelect({
        handles: true,
      onSelectEnd: function(img, selection)
                {
                    jQuery('#x1').val(selection.x1);
                    jQuery('#y1').val(selection.y1);
                    jQuery('#width').val(selection.width);
                    jQuery('#height').val(selection.height);
                },
    aspectRatio: "<?php echo $ratio;?>"
    });
});
</script>